<template>
  <nut-actionsheet v-if="subjectWithItem" @close="close" :visible="show"
                   :title="subjectWithItem==null?'':subjectWithItem.name + '成绩录入'">
    <div style="padding: 8px;display: flex;flex-direction: row">

      <nut-radiogroup v-model="selectSubItem">
        <nut-radio v-for="(item,index) in subjectWithItem.baseSubItemList" :value="index" shape="button" :label="item">{{
            item.itemName
          }}
        </nut-radio>
      </nut-radiogroup>

      <nut-radiogroup v-model="selectCount">
        <nut-radio v-for="(item,index) in subjectWithItem.count" :value="item+1" shape="button" :label="item">第{{
            item
          }}次
        </nut-radio>
      </nut-radiogroup>
      <div style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: space-around">
        <div style="font-size: 46px;font-weight: bolder">
          {{ inputValue == '' ? getScore(selectCount) : inputValue }}{{ selectSubItem.unit }}
        </div>
        <div
            style="font-size: 24px;background: #1ab394;border-radius: 16px;padding: 0px 16px;margin-bottom: 8px;color: white">
          {{ getConvScore(selectCount) }}分
        </div>
      </div>
    </div>
    <div style="flex: 1;display: flex;flex-direction: column;background: #f3f3f3">
      <div style="display: flex;flex: 1">
        <div @click="input('1')" class="key">
          <div>1</div>
        </div>
        <div @click="input('2')" class="key">
          <div>2</div>
        </div>
        <div @click="input('3')" class="key">
          <div>3</div>
        </div>
        <div @click="input('<')" class="key">
          <div>
            <nut-icon name="rect-left"></nut-icon>
          </div>
        </div>
      </div>
      <div style="display: flex;flex: 1">
        <div @click="input('4')" class="key">
          <div>4</div>
        </div>
        <div @click="input('5')" class="key">
          <div>5</div>
        </div>
        <div @click="input('6')" class="key">
          <div>6</div>
        </div>
        <div @click="input('-')" class="key">
          <div>-</div>
        </div>
      </div>
      <div style="display: flex;flex: 1">
        <div @click="input('7')" class="key">
          <div>7</div>
        </div>
        <div @click="input('8')" class="key">
          <div>8</div>
        </div>
        <div @click="input('9')" class="key">
          <div>9</div>
        </div>
        <div @click="input('cancel')" class="key">
          <div style="background: #ff899b">取消</div>
        </div>
      </div>
      <div style="display: flex;flex: 1">
        <div @click="input(':')" class="key">
          <div>：</div>
        </div>
        <div @click="input('.')" class="key">
          <div>.</div>
        </div>
        <div @click="input('0')" class="key">
          <div>0</div>
        </div>
        <div @click="input('confirm')" class="key">
          <div style="background: #ffae3a">确定</div>
        </div>
      </div>
    </div>

  </nut-actionsheet>
</template>

<script>

import {updateScore} from "@/api/business/score";
import {Toast} from "@nutui/nutui";

export default {
  name: "MyKeyboard",
  props: {
    subItem: Object
  },
  emits: ['complete'],
  data() {
    return {
      show: false,
      radioVal: null,
      inputValue: '',
      selectItem: {},
      subjectWithItem: null,
      examSub: null,
      selectCount: 1,
      selectSubItem: {},
    }
  },

  methods: {
    //调用此方法显示底部弹出层

    input(char) {
      if (char === '<') {
        if (this.inputValue.length >= 1) {
          this.inputValue = this.inputValue.slice(0, -1);
        }
      } else if (char === 'cancel') {
        this.inputValue = '';
        this.editScoreShow = false;
        this.selectItem = null;
        this.close();
      } else if (char === 'confirm') {
        if (this.inputValue == '') {
          return;
        }
        this.confirmScore();
      } else {
        let value = this.inputValue + char;
        // if (parseFloat(value) > this.selectItem.maxScore) {
        //   alert("超出限制")
        // } else {
        //   this.inputValue = this.inputValue + char;
        // }
        this.inputValue = this.inputValue + char;

      }
    },
    showPopup(item) {
      console.log(JSON.stringify(item))
      this.subjectWithItem = item;
      //
      // this.bestCount = this.examScoreRes.bestCount;
      // if (this.bestCount == null) {
      //   this.bestCount = 1;
      // }
      // this.examSub = {};
      // this.examSub.count = 2;
      this.show = true;
      // this.selectCount = 1;
      // if (this.examScoreRes.scoreList != null) {
      //   for (let i = 0; i < this.examSub.count; i++) {
      //     if (this.examScoreRes.scoreList[i] != null && this.selectCount < this.examSub.count) {
      //       this.selectCount++;
      //     }
      //   }
      // }


    },
    close() {
      this.show = false;
    },
    closePopup(type) {
      this.show = false;
      this.$emit('close', {});
      this.numbertext = [];
    },
    confirmScore() {
      const toast = Toast.loading('提交中...');

      let updateScore = {
        rawScore: this.inputValue,
        subId: this.examSub.id,
        stuId: this.examScoreRes.id,
        count: this.selectCount,
      };
      addScore(
          updateScore
      ).then(response => {
        this.show = false;
        this.inputValue = '';
        this.$emit('complete', {});
        toast.hide();
      });
    },
    getScore() {
      let score = '---';
      if (this.subjectWithItem.scoreList == null) {
        return score;
      }
      for (let i = 0; i < this.subjectWithItem.scoreList.length; i++) {
        if (this.subjectWithItem.scoreList[i].count == this.selectCount) {
          score = this.subjectWithItem.scoreList[i].rawScore;
        }
      }
      return score;
    },
    getConvScore() {
      let score = '---';
      if (this.subjectWithItem.scoreList == null) {
        return score;
      }
      for (let i = 0; i < this.subjectWithItem.scoreList.length; i++) {
        if (this.subjectWithItem.scoreList[i].count == this.selectCount) {
          score = this.subjectWithItem.scoreList[i].score;
        }
      }
      return score;
    }
  }
}
</script>

<style scoped>

.keyboard {
  display: flex;
  flex-wrap: wrap;
  border-radius: 16px;
}

.key {
  flex: 1;
  padding: 8px;
  height: 80px;
}

.key div {
  border-radius: 8px;
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bolder;
}

.key div:hover {
  cursor: pointer;
}

.key div:active {
  background: #23b3ff;
}
</style>